import React from 'react';
import { Modal,Button,Select,Input,Form} from 'antd'
import { common } from 'mixin/common'
const { Option } = Select;

class InfoModal extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            visible:false,
            loading:false
        }
    }
    componentWillMount(){
        console.log("infoModalp12rops",this.props)
    }
    componentWillReceiveProps(nextProps) {
        this.setState({ 'visible': nextProps.visible })
    }
    handleOk = ()=>{
        this.props.form.validateFields((err, fieldsValue) => {
            if (err) {
              return;
            }else{
                this.setState({'loading':true})
                setTimeout(() => {
                    console.log('Received values of form: ', fieldsValue);
                    this.setState({ 'loading': false, 'visible': false });
                }, 2000);
            }
        })
    }
    render(){
        const { getFieldDecorator } = this.props.form;
        return(
            <Modal
                title="信息框"
                visible={this.state.visible}
                onCancel={()=>{this.setState({ visible: false})}}
                footer={this.props.mode !== 'see'?[
                    <Button key="back" onClick={()=>{this.setState({ visible: false})}}>
                        取 消
                    </Button>,
                    <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>
                        确 定
                    </Button>,
                  ]:[]}
                >
                <Form labelCol={{ span: 5 }} wrapperCol={{ span: 18 }}>
                    <Form.Item label="姓名">
                        {getFieldDecorator('name', {
                            rules: [{ required: true, message: 'Please input your name!' }],
                            initialValue: this.props.formData['name']
                        })(<Input placeholder="input your name" disabled={this.props.mode === 'see'?true:false}/>)}
                    </Form.Item>
                    <Form.Item label="年龄">
                        {getFieldDecorator('name', {
                            rules: [{ required: true, message: 'Please input your name!' }],
                            initialValue: this.props.formData['age']
                        })(<Input placeholder="input your name" disabled={this.props.mode === 'see'?true:false}/>)}
                       
                    </Form.Item>
                    <Form.Item label="地址">
                        {getFieldDecorator('address', {
                            rules: [{ required: true, message: 'Please select your age!' }],
                            initialValue: this.props.formData['address']
                        })(
                            <Select placeholder="Select a option and change input text above" disabled={this.props.mode === 'see'?true:false}>
                                {this.props.dic.address.map((item)=>
                                    <Option key={item.id} value={item.id}>{item.name}</Option>
                                )}
                            </Select>,
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        )
    }
}

InfoModal = Form.create({ name: 'info' })(InfoModal);
export default common(InfoModal)